<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { onMounted, ref } from 'vue'
import { Table } from '@/components/Table'
import { useRouter } from 'vue-router'
import { BaseButton } from '@/components/Button'
import { SysMachineReportListVo, SysMachineReportSearchQo } from '@/api/system/monitor/SysMachineReport/types'
import { sysMachineReportDeleteApi, sysMachineReportPageApi } from '@/api/system/monitor/SysMachineReport'
import { AllSchemas, useBasePageView } from '@/base/views/BasePageView'
import { TableSortProps } from '@/components/Table/src/types'
import { ElText } from 'element-plus'
import { sysDictChooseListApi } from '@/api/system/dict/SysDict'
import { KeyLabelValueVo } from '@/base/api/KeyLabelValueVo'
// [[ OnflowGenerator Range (- selectFunctionImport -) Start ]]
import { selectSysMachineInfoMachineIdListApi } from '@/api/system/monitor/SysMachineInfo'
// [[ OnflowGenerator Range (- selectFunctionImport -) End ]]

defineOptions({
  name: 'SysMachineReportPage'
})
const { push } = useRouter()

const pageView = useBasePageView<SysMachineReportListVo, SysMachineReportSearchQo>('SysMachineReport')
const {
  pageInfo,
  delLoading,
  loading,
  dataList,
  baseGetList,
  searchParams,
  baseSortChange,
  datePickerShortcuts,
  registerRefreshEvent,
  editUrl,
  addUrl
} = pageView

const getList = async (params: any) => {
  await baseGetList(params, sysMachineReportPageApi)
}
pageView.doWatch(getList)
// [[ OnflowGenerator Range (- dictFunctions -) Start ]]

// [[ OnflowGenerator Range (- dictFunctions -) End ]]

// [[ OnflowGenerator Range (- selectFunctions -) Start ]]
const sysMachineInfoMachineIdList = ref<Array<KeyLabelValueVo>>([])
const getSysMachineInfoMachineIdList = async () => {
  const res = await selectSysMachineInfoMachineIdListApi({})
  sysMachineInfoMachineIdList.value = res.data
}
getSysMachineInfoMachineIdList()

// [[ OnflowGenerator Range (- selectFunctions -) End ]]

const delData = async (row: SysMachineReportListVo | null) => {
  await pageView.delData(row, sysMachineReportDeleteApi, () => {
    getList({ ...searchParams.value })
  })
}

const sortChange = async (sortProps: TableSortProps) => {
  await baseSortChange(sortProps, sysMachineReportPageApi)
}

const allSchemas = ref<AllSchemas>({
  searchSchema: [
    // [[ OnflowGenerator Range (- searchSchemas -) Start ]]
    {
      field: 'id',
      label: '主键id',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择主键id',
        clearable: true
      }
    },
    {
      field: 'infoId',
      label: '服务器信息',
      component: 'Select',
      componentProps: {
        placeholder: '请选择服务器信息Id',
        clearable: true,
        filterable: true,
        options: sysMachineInfoMachineIdList
      }
    },
    {
      field: 'machineId',
      label: '服务器id',
      component: 'Input',
      componentProps: {
        placeholder: '请输入服务器id',
        clearable: true
      }
    },
    {
      field: 'cpuUsage',
      label: 'CPU使用率',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择CPU使用率',
        clearable: true
      }
    },
    {
      field: 'cpuFreq',
      label: 'CPU频率',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择CPU频率',
        clearable: true
      }
    },
    {
      field: 'memoryUsage',
      label: '内存使用率',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择内存使用率',
        clearable: true
      }
    },
    {
      field: 'physicalMemoryInUse',
      label: '物理内存使用量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择物理内存使用量',
        clearable: true
      }
    },
    {
      field: 'physicalMemoryTotal',
      label: '物理内存总量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择物理内存总量',
        clearable: true
      }
    },
    {
      field: 'virtualMemoryInUse',
      label: '虚拟内存使用量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择虚拟内存使用量',
        clearable: true
      }
    },
    {
      field: 'virtualMemoryTotal',
      label: '虚拟内存总量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择虚拟内存总量',
        clearable: true
      }
    },
    {
      field: 'storageUsage',
      label: '存储使用率',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择存储使用率',
        clearable: true
      }
    },
    {
      field: 'storageTotal',
      label: '存储总量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择存储总量',
        clearable: true
      }
    },
    {
      field: 'storageInUse',
      label: '存储使用量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择存储使用量',
        clearable: true
      }
    },
    {
      field: 'diskWrite',
      label: '磁盘写入',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择磁盘写入',
        clearable: true
      }
    },
    {
      field: 'diskRead',
      label: '磁盘读取',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择磁盘读取',
        clearable: true
      }
    },
    {
      field: 'networkDownload',
      label: '网络下载',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择网络下载',
        clearable: true
      }
    },
    {
      field: 'networkUpload',
      label: '网络上传',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择网络上传',
        clearable: true
      }
    },
    {
      field: 'jvmMemoryUsage',
      label: 'JVM内存使用率',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择JVM内存使用率',
        clearable: true
      }
    },
    {
      field: 'jvmMemoryTotal',
      label: 'JVM内存总量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择JVM内存总量',
        clearable: true
      }
    },
    {
      field: 'jvmMemoryInUse',
      label: 'JVM内存使用量',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择JVM内存使用量',
        clearable: true
      }
    },
    {
      field: 'createTime',
      label: '创建时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择创建时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'updateTime',
      label: '更新时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择更新时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    }
    // [[ OnflowGenerator Range (- searchSchemas -) End ]]

  ],
  tableColumns: [
    {
      field: 'selection',
      type: 'selection'
    },
    {
      field: 'index',
      label: '序号',
      type: 'index',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    // [[ OnflowGenerator Range (- tableColumns -) Start ]]
    {
      field: 'infoIdName',
      label: '服务器信息',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div
                onClick={() => {
                  push(`/System/SysMachineInfo/SysMachineInfoEdit?id=${data.row.infoId}&type=edit`)
                }}
              >
                <ElText type="primary" style="cursor: pointer;">
                  {data.row.infoIdName}
                </ElText>
              </div>
            </>
          )
        }
      }
    },
    {
      field: 'machineId',
      label: '服务器id',
      sortable: 'custom'
    },
    {
      field: 'cpuUsage',
      label: 'CPU使用率',
      sortable: 'custom'
    },
    {
      field: 'cpuFreq',
      label: 'CPU频率',
      sortable: 'custom'
    },
    {
      field: 'memoryUsage',
      label: '内存使用率',
      sortable: 'custom'
    },
    {
      field: 'physicalMemoryInUse',
      label: '物理内存使用量',
      sortable: 'custom'
    },
    {
      field: 'physicalMemoryTotal',
      label: '物理内存总量',
      sortable: 'custom'
    },
    {
      field: 'virtualMemoryInUse',
      label: '虚拟内存使用量',
      sortable: 'custom'
    },
    {
      field: 'virtualMemoryTotal',
      label: '虚拟内存总量',
      sortable: 'custom'
    },
    {
      field: 'storageUsage',
      label: '存储使用率',
      sortable: 'custom'
    },
    {
      field: 'storageTotal',
      label: '存储总量',
      sortable: 'custom'
    },
    {
      field: 'storageInUse',
      label: '存储使用量',
      sortable: 'custom'
    },
    {
      field: 'diskWrite',
      label: '磁盘写入',
      sortable: 'custom'
    },
    {
      field: 'diskRead',
      label: '磁盘读取',
      sortable: 'custom'
    },
    {
      field: 'networkDownload',
      label: '网络下载',
      sortable: 'custom'
    },
    {
      field: 'networkUpload',
      label: '网络上传',
      sortable: 'custom'
    },
    {
      field: 'jvmMemoryUsage',
      label: 'JVM内存使用率',
      sortable: 'custom'
    },
    {
      field: 'jvmMemoryTotal',
      label: 'JVM内存总量',
      sortable: 'custom'
    },
    {
      field: 'jvmMemoryInUse',
      label: 'JVM内存使用量',
      sortable: 'custom'
    },
    {
      field: 'createTime',
      label: '创建时间',
      sortable: 'custom'
    },
    {
      field: 'updateTime',
      label: '更新时间',
      sortable: 'custom'
    },
    // [[ OnflowGenerator Range (- tableColumns -) End ]]

    {
      field: 'action',
      width: '260px',
      label: '操作',
      slots: {
        default: (data: any) => {
          return (
            <>
              <BaseButton type="primary" onClick={() => editData(data.row)} permission="'edit'">
                编辑
              </BaseButton>
              <BaseButton type="danger" onClick={() => delData(data.row)} permission="'delete'">
                删除
              </BaseButton>
            </>
          )
        }
      }
    }
  ]
})

const editData = (row: SysMachineReportListVo) => {
  push(`${editUrl}?id=${row.id}&type=edit`)
}

const addAction = () => {
  push(`${addUrl}?type=add`)
}

onMounted(() => {
  getList({})
  registerRefreshEvent(sysMachineReportPageApi)
})
</script>

<template>
  <ContentWrap>
    <Search
      :schema="allSchemas.searchSchema"
      @search="getList"
      @reset="getList"
      expandField="id"
      :searchLoading="loading"
      :resetLoading="loading"
    />

    <div class="mb-10px">
      <BaseButton type="primary" @click="addAction" permission="'add'">新增</BaseButton>
      <BaseButton :loading="delLoading" type="danger" @click="delData(null)" permission="'delete'">
        删除
      </BaseButton>
    </div>

    <Table
      v-model:pageSize="pageInfo.pageSize"
      v-model:currentPage="pageInfo.currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :stripe="true"
      :pagination="{
        total: pageInfo.totalCount
      }"
      @register="pageView.tableRegister"
      @sort-change="sortChange"
    />
  </ContentWrap>
</template>
